<template>
  <div class="page flex-col">
    <div class="group_1 flex-row">
      <div class="group_8 flex-col justify-between">
        <div class="section_18 flex-row justify-between">
          <div class="box_11 flex-col justify-between">
            <div class="section_19 flex-col">
              <div class="box_12 flex-row">
                <img
                  class="image_1"
                  referrerpolicy="no-referrer"
                  src="@/assets/images/detail-title-icon.png"
                />
                <div class="box_13 flex-col justify-between">
                  <span class="text_17"
                    >报修单-{{ datas?.equipment?.name }}</span
                  >
                  <div class="text-wrapper_2">
                    <span class="text_18">器材型号：</span>
                    <span class="text_19">{{ datas?.equipment?.model }}</span>
                  </div>
                </div>
              </div>
              <div class="text-wrapper_3">
                <span class="text_20">器材编码：</span>
                <span class="text_21">{{
                  datas?.customer_equipment?.equipment_no
                }}</span>
              </div>
              <div class="text-wrapper_4">
                <span class="text_22">资产编号：</span>
                <span class="text_23">{{
                  datas?.customer_equipment.asset_no
                }}</span>
              </div>
              <div class="text-wrapper_5">
                <span class="text_24">器材分类：</span>
                <span class="text_25">{{
                  datas?.equipment?.equipment_category_name
                }}</span>
              </div>
              <div class="text-wrapper_6">
                <span class="text_26">保修日期：</span>
                <span class="text_27">{{ datas?.warranty_end_date }}</span>
              </div>
            </div>
            <div class="section_20 flex-row justify-between" @click="handleTo">
              <img
                class="thumbnail_9"
                referrerpolicy="no-referrer"
                src="@/assets/icon-repair.png"
              />
              <span class="text_28">查看报修记录</span>
            </div>
          </div>
          <div class="box_14 flex-col">
            <a-form
              layout="vertical"
              ref="formRef"
              :model="formState"
              :rules="rules"
            >
              <div class="option-column">
                <div class="column-content">
                  <div class="content-item">
                    <a-form-item label="出故障日期" name="breakdown_date">
                      <a-date-picker
                        style="width: 100%"
                        v-model:value="formState.breakdown_date"
                        format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择出故障日期"
                      />
                    </a-form-item>
                  </div>
                  <div class="content-item">
                    <a-form-item label="上传附件" name="repair_file">
                      <a-upload-dragger
                        v-model:fileList="fileList"
                        name="file"
                        :multiple="false"
                        :max-count="1"
                        :customRequest="customUpload"
                        @change="handleChange"
                      >
                        <p class="ant-upload-drag-icon">
                          <CloudUploadOutlined />
                        </p>
                        <p class="ant-upload-hint">
                          将文件拖拽到此，或单击<span class="blue"
                            >直接上传</span
                          >
                        </p>
                      </a-upload-dragger>
                    </a-form-item>
                  </div>
                  <div class="content-item">
                    <a-form-item label="故障描述" name="description">
                      <a-textarea
                        v-model:value="formState.description"
                        placeholder="请输入故障描述"
                      />
                    </a-form-item>
                  </div>
                </div>
              </div>

              <div
                class="option-footer"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <a-button
                  class="opt-btn"
                  @click="resetForm"
                  style="margin-right: 12px"
                  >取消</a-button
                >
                <a-button class="opt-btn" type="primary" @click="handleSubmit"
                  >保存</a-button
                >
              </div>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/api";
import systemApi from "@/api/system";
import router from "@/routers";
import { message } from "ant-design-vue";
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const rules = ref({
  breakdown_date: [
    {
      required: true,
      message: "请选择出故障日期",
      trigger: "change",
    },
  ],
});
const query = computed(() => route.query);
const datas = ref();
const getData = async () => {
  let params = {
    order_equipment_id: query.value.id,
  };
  const res = await api.apiOrderEquipmentFetchModelPost(params);
  datas.value = res.data;
};
const formRef = ref(null);
const formState = ref({
  breakdown_date: null,
  repair_file: [],
  description: "",
});
const handleTo = () => {
  router.push("/repair-record");
};
// 自定义上传函数
const customUpload = async (options) => {
  const { file, onSuccess, onError, onProgress } = options;

  try {
    onProgress({ percent: 50 });
    const response = await systemApi.FileUpload(file);
    console.log("文件上传响应:", response);
    // 适配实际的API响应格式
    if (response && response.url) {
      // 构造符合Ant Design Upload组件期望的响应格式
      const formattedResponse = {
        succeeded: true,
        data: {
          url: response.url.trim().replace(/`/g, ""), // 去除URL中的反引号和空格
          file_id: response.file_id,
          file_name: response.file_name,
          file_size: response.file_size,
          file_content_type: response.file_content_type,
        },
      };
      console.log("格式化后的响应:", formattedResponse);
      onSuccess(formattedResponse, file);
    } else {
      console.error("API响应格式错误:", response);
      onError(new Error("上传失败：响应格式错误"));
    }
  } catch (error) {
    console.error("文件上传失败:", error);
    onError(error);
  }
};
const handleChange = (info) => {
  console.log("文件上传状态改变:", info);
  formState.value.repair_file = info.fileList.map((file) => {
    return {
      ...file,
      ...file.response?.data,
    };
  });
};
const handleSubmit = (values) => {
  formRef.value
    .validate()
    .then(async ({ breakdown_date, description, repair_file }) => {
      const resRepair = await api.apiRepairCreatePost({
        breakdown_date,
        description,
        enabled: true,
        repair_status_id: 0,
        repair_category_id: 0,
        order_equipment_id:datas.value.order_equipment_id,
      });
      const repair_id = resRepair.data.repair_id; //第一步完成

      repair_file?.forEach(async ({ originFileObj }, sort) => {
        const resFileUpload = await api.apiFileUploadPost({
          fileName: originFileObj.name,
          data: originFileObj,
        }); //第二步完成
        await api.apiRepairFileCreatePost({
          repair_id,
          sort,
          ...resFileUpload.data,
        }); //第三步完成
      });
      message.success("报修成功");
      router.go(-1);
    });
};
const resetForm = () => {
  formState.value = {
    breakdown_date: null,
    repair_file: [],
    description: "",
  };
  router.go(-1);
};
onMounted(async () => {
  await getData();
});
</script>
<style lang="less" scoped>
.page {
  background-color: rgba(250, 250, 250, 1);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .group_1 {
    width: 100%;
    height: 100%;
  }
  .group_8 {
    width: 100%;
    height: 100%;

    .section_18 {
      width: 100%;
      height: 100%;
      display: flex;
      .box_11 {
        width: 336px;
        height: 319px;
        margin-right: 12px;
        .section_19 {
          background-color: rgba(255, 255, 255, 1);
          width: 336px;
          height: 257px;

          .box_12 {
            box-shadow: inset 0px 0px 0px 0px rgba(190, 196, 202, 1);
            background-color: rgba(255, 255, 255, 1);
            width: 304px;
            height: 92px;
            margin-left: 16px;

            .image_1 {
              width: 60px;
              height: 60px;
              margin-top: 16px;
            }

            .box_13 {
              width: 154px;
              height: 52px;
              margin: 20px 78px 0 12px;

              .text_17 {
                width: 154px;
                height: 30px;
                overflow-wrap: break-word;
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                white-space: nowrap;
                line-height: 30px;
              }

              .text-wrapper_2 {
                width: 129px;
                height: 20px;
                overflow-wrap: break-word;
                font-size: 0;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 20px;
                margin-top: 2px;

                .text_18 {
                  width: 129px;
                  height: 20px;
                  overflow-wrap: break-word;
                  color: rgba(102, 102, 102, 1);
                  font-size: 14px;
                  font-weight: normal;
                  text-align: left;
                  white-space: nowrap;
                  line-height: 20px;
                }

                .text_19 {
                  width: 129px;
                  height: 20px;
                  overflow-wrap: break-word;
                  color: rgba(38, 38, 38, 1);
                  font-size: 14px;
                  font-weight: normal;
                  text-align: left;
                  white-space: nowrap;
                  line-height: 20px;
                }
              }
            }
          }

          .text-wrapper_3 {
            width: 93px;
            height: 20px;
            overflow-wrap: break-word;
            font-size: 0;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 16px 0 0 16px;

            .text_20 {
              width: 93px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }

            .text_21 {
              width: 93px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }
          }

          .text-wrapper_4 {
            width: 85px;
            height: 20px;
            overflow-wrap: break-word;
            font-size: 0;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 6px 0 0 16px;

            .text_22 {
              width: 85px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }

            .text_23 {
              width: 85px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }
          }

          .text-wrapper_5 {
            width: 100px;
            height: 20px;
            overflow-wrap: break-word;
            font-size: 0;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 6px 0 0 16px;

            .text_24 {
              width: 100px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }

            .text_25 {
              width: 100px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }
          }

          .text-wrapper_6 {
            width: 247px;
            height: 20px;
            overflow-wrap: break-word;
            font-size: 0;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 6px 0 51px 16px;

            .text_26 {
              width: 247px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }

            .text_27 {
              width: 247px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
            }
          }
        }

        .section_20 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          width: 336px;
          height: 50px;
          cursor: pointer;
          border: 1px solid rgba(190, 196, 202, 1);
          margin-top: 12px;

          .thumbnail_9 {
            width: 20px;
            height: 20px;
            margin: 15px 0 0 113px;
          }

          .text_28 {
            width: 84px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 14px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 15px 113px 0 0;
          }
        }
      }

      .box_14 {
        background-color: rgba(255, 255, 255, 1);
        flex: 1;
        padding: 24px;

        .section_21 {
          width: 434px;
          height: 20px;
          margin: 24px 0 0 24px;

          .text_29 {
            width: 42px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 14px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
          }

          .thumbnail_10 {
            width: 6px;
            height: 6px;
            margin: 7px 0 0 4px;
          }

          .text_30 {
            width: 56px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 14px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin-left: 316px;
          }

          .thumbnail_11 {
            width: 6px;
            height: 6px;
            margin: 7px 0 0 4px;
          }
        }

        .section_22 {
          width: 712px;
          height: 32px;
          margin: 8px 0 0 24px;

          .section_23 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 4px;
            width: 344px;
            height: 32px;
            border: 1px solid rgba(190, 196, 202, 1);

            .text_31 {
              width: 84px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(191, 191, 191, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
              margin: 6px 0 0 12px;
            }

            .thumbnail_12 {
              width: 16px;
              height: 16px;
              margin: 8px 14px 0 218px;
            }
          }

          .section_24 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 4px;
            width: 344px;
            height: 32px;
            border: 1px solid rgba(190, 196, 202, 1);

            .text_32 {
              width: 98px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(191, 191, 191, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
              margin: 6px 0 0 12px;
            }

            .thumbnail_13 {
              width: 16px;
              height: 16px;
              margin: 8px 14px 0 204px;
            }
          }
        }

        .section_25 {
          width: 424px;
          height: 20px;
          margin: 24px 0 0 24px;
        }

        .section_26 {
          width: 710px;
          height: 32px;
          margin: 8px 0 0 24px;

          .section_27 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 4px;
            width: 342px;
            height: 32px;
            border: 1px solid rgba(190, 196, 202, 1);

            .text_35 {
              width: 112px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(191, 191, 191, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
              margin: 6px 0 0 12px;
            }

            .thumbnail_15 {
              width: 16px;
              height: 16px;
              margin: 8px 12px 0 0;
            }
          }

          .section_28 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 4px;
            width: 342px;
            height: 32px;
            border: 1px solid rgba(190, 196, 202, 1);

            .thumbnail_16 {
              width: 16px;
              height: 16px;
              margin: 8px 0 0 133px;
            }

            .text_36 {
              width: 56px;
              height: 20px;
              overflow-wrap: break-word;
              color: rgba(89, 89, 89, 1);
              font-size: 14px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;
              margin: 6px 133px 0 0;
            }
          }
        }

        .text_37 {
          width: 56px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 14px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin: 24px 0 0 24px;
        }

        .text-wrapper_7 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          height: 260px;
          border: 1px solid rgba(190, 196, 202, 1);
          width: 712px;
          margin: 8px 0 310px 24px;

          .text_38 {
            width: 98px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(191, 191, 191, 1);
            font-size: 14px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 12px 0 0 12px;
          }
        }
      }
    }
  }
}
</style>
